<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="../img/asset-favico.ico">
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <link rel="stylesheet" href="../plugins/font-awesome/css/font-awesome.min.css">
    <title>健康体检</title>
    <link rel="stylesheet" href="../css/page-health-report.css" />
</head>

<body data-spy="scroll" data-target="#myNavbar" data-offset="150">
<div id="app">
    <!-- 页面头部 -->
    <div class="top-header">
        <span class="f-left"><i class="icon-back"></i>返回</span>
        <span class="center">体检报告</span>
        <span class="f-right"><i class="icon-more"></i></span>
    </div>
    <!-- 页面内容 -->
    <div class="contentBox">
        <div class="list-row3">
            <el-collapse  @change="handleChange">
                <el-collapse-item title="总检建议" name="1">
                    <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
                    <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
                </el-collapse-item>
                <div  v-for="group in groups" @click="getItems(group)">
                    <el-collapse-item>
                        <template slot="title">
                            <span class="title">{{group.name}}</span>
                        </template>
                        <el-collapse  @change="handleChange">
                            <div v-for="item in items" >
                                <el-collapse-item>
                                    <template slot="title">
                                        <span class="title">{{item.name}}</span>
                                    </template>
                                    <div>{{item.result}}</div>
                                </el-collapse-item>
                            </div>
                        </el-collapse>
                    </el-collapse-item>
                </div>

<!--                <el-collapse-item title="效率 Efficiency" name="3">-->
<!--                    <div>简化流程：设计简洁直观的操作流程；</div>-->
<!--                    <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>-->
<!--                    <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>-->
<!--                </el-collapse-item>-->
<!--                <el-collapse-item title="可控 Controllability" name="4">-->
<!--                    <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>-->
<!--                    <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>-->
<!--                </el-collapse-item>-->
            </el-collapse>
    </div>
</div>
</div>


</body>
<!--<script src="https://unpkg.com/vue@3"></script>-->
<script src="../js/vue.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../js/jquery.min.js"></script>
<script src="../js/axios-0.18.0.js"></script>
<script>
    function GetQueryString(name)
    {
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if(r!=null)return unescape(r[2]); return null;
    }
    var vue= new Vue({
        el:'#app',
        data:{
            groups:[],
            items:[],
            results:''
        },
        created(){
            this.getGroups()
        },
        methods: {
            handleChange(val) {
                console.log(val);
            },
            getGroups(){
                axios.get("http://localhost:81/checkgroup/findById?id="+GetQueryString("id")).then((resp) =>{
                    this.groups=resp.data;
                })
            },
            getItems(group) {
                axios.get("http://localhost:81/checkitem/findAll?id="+group.id+"&mid="+GetQueryString("mid")).then((resp) =>{
                    this.items=resp.data;
                })
            }
        }
    })
</script>
</html>